<template>
  <div>
    <!-- search组件 -->
    <van-sticky>
      <van-search
        ref="search"
        class="search"
        clear-trigger="always"
        v-model="value"
        show-action
        placeholder="请输入商品名称"
        @search="onSearch"
        @cancel="onCancel"
        @input="onInput"
        @focus="onFocus"
      />
    </van-sticky>

    <!-- 下拉菜单 -->
    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      v-if="flag == 2"
    >
      <van-cell
        v-for="(item, index) in searchItemList"
        :key="index"
        :title="item"
        @click="goSearchItem(item)"
      />
    </van-list>

    <!-- 热门搜索和搜索历史部分  -->

    <SearchNav
      v-else-if="flag == 1"
      :valueList="valueList"
      :searchInfoList="searchInfoList"
      @changeFlag="changeFlag"
      @reset="reset"
    >
    </SearchNav>
    <!-- search详情页吸顶 -->
    <van-sticky v-else :offset-top="40">
      <SearchDetail :value="value" />
    </van-sticky>
  </div>
</template>

<script>
import { mapState } from "vuex";
import SearchNav from "./SearchNav/SearchNav.vue";
import SearchDetail from "./SearchDetail/SearchDetail.vue";
export default {
  components: {
    SearchNav,
    SearchDetail,
  },
  name: "Search",
  data() {
    return {
      value: "", //search数据
      valueList: [], //search历史记录数组
      itemList: [], //list数据
      loading: false,
      finished: false,
      flag: 1, //跳转标识

      searchDetailList: {
        keyword: "",
        sortType: 0, //只有价格标签  选中按钮时候 值为1
        descSorted: false, // 从小到大false 从大到小 true
        categoryId: 0, //分类id

        needPopWindow: true,
        searchWordSource: 7,
        stillSearch: false,
        _stat_search: "",
        itemId: 0,
        size: 40,
        upperPrice: -1, // 筛选价格要把descSorted删掉
        floorPrice: -1,
        matchType: 0,
      },

      /* 搜索参数。14个kv */
    };
  },
  mounted() {
    this.$store.dispatch("search/getSearchInfo");
    let storage = localStorage.getItem("SEARCH_HISTORY");
    if (storage) {
      this.valueList = JSON.parse(localStorage.getItem("SEARCH_HISTORY"));
    } else {
      this.valueList = [];
    }
    // 取消按钮不显示
    // this.$refs.search.childNodes[1].style = "display:none";
  },
  methods: {
    // 敲回车时触发
    onSearch(keyword) {
      // 拿本地存储
      this.getLocalStorage(keyword);
      //跳转并且发请求

      this.$router.push({
        query: { stat_search: "userhand", keyword },
      });
      // 是否显示搜索详情
      this.flag = 3;
      this.$refs.search.childNodes[1].style = "display:none";
      // 搜索详情页

      // 先把vuex数据清理了
      this.$store.dispatch("search/resetSearchDetail");
      // 存keyword 和stat_search
      this.searchDetailList.stat_search = "userhand";
      this.searchDetailList.keyword = keyword;
      this.$store.dispatch("search/getSearchDetail", this.searchDetailList);
    },
    onCancel() {
      this.$router.back();
    },

    // 输入值改变时触发
    onInput(keyword) {
      let str = { keywordPrefix: keyword };
      this.$store.dispatch("search/getSearchItem", str);
      this.flag = 2;

      if (!keyword) {
        this.flag = 1;
      }
    },
    // list加载回调
    onLoad() {
      // 异步更新数据

      this.itemList = this.searchItemList;
      // 加载状态结束
      this.loading = false;

      // 数据全部加载完成

      this.finished = true;
    },

    // list点击的回调
    goSearchItem(item) {
      let keyword = item;
      // 保存历史记录
      this.getLocalStorage(item);

      this.$router.push({
        query: { stat_search: "autoComplete", keyword },
      });
      // 是否显示搜索详情
      this.flag = 3;
      this.$refs.search.childNodes[1].style = "display:none";
      // 搜索详情页
      // 存keyword 和stat_search
      this.searchDetailList.stat_search = "autoComplete";
      this.searchDetailList.keyword = keyword;
      this.$store.dispatch("search/getSearchDetail", this.searchDetailList);
    },
    // 获取locaLstorage并存储
    getLocalStorage(item) {
      let storage = localStorage.getItem("SEARCH_HISTORY");
      if (!storage) {
        this.valueList.push(item);
      } else {
        this.valueList = JSON.parse(localStorage.getItem("SEARCH_HISTORY"));
        let historySearch = this.valueList.find((history) => {
          return history == item;
        });
        if (!historySearch) {
          this.valueList.push(item);
        }
      }

      localStorage.setItem("SEARCH_HISTORY", JSON.stringify(this.valueList));
    },

    onFocus() {
      if (this.value) {
        // 有数据时获得焦点时触发 让搜索列表展示出来
        let str = { keywordPrefix: this.value };
        this.$store.dispatch("search/getSearchItem", str);

        this.flag = 2;
      }
    },
    // 自定义事件
    changeFlag(obj) {
      this.flag = obj.tag;
      this.$refs.search.childNodes[1].style = "display:none";
      this.value = obj.keyword;
    },
    reset(data) {
      this.valueList = data;
    },
  },
  computed: {
    ...mapState({
      searchInfoList: (state) => state.search.searchInfoList,
      searchItemList: (state) => state.search.searchItemList,
    }),
  },
};
</script>

<style lang="less" scoped>
.tag {
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}
</style>
